<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <a-card :bordered="false">
      <h3 style="margin-bottom: 20px;">编辑用户/导购/创作者信息</h3>
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 16 }, sm: { span: 17 } }">
        <a-form-model-item label="昵称">
          {{ form.userNickname }}
        </a-form-model-item>
        <a-form-model-item label="头像">
          <img class="avatar" :src="form.headPortrait" alt="" />
        </a-form-model-item>
        <a-form-model-item label="性别">
          {{ form.sex }}
        </a-form-model-item>
        <a-form-model-item label="身份标识" prop="identityId">
          <a-select v-model="form.identityId" placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option v-for="item in identityList" :disabled="currentIdentityId == item.id || item.id == 1|| item.id == 2 " :value="item.id" :key="item.id">{{ item.identityName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-if="form.identityId > 3" label=" 姓名（选填）">
          <a-input v-model="form.userName" />
        </a-form-model-item>
        <a-form-model-item label="手机">
          {{ form.phone }}
        </a-form-model-item>
        <a-form-model-item label="邀请人">
          {{ form.inviterName }}
        </a-form-model-item>
        <a-form-model-item label="账号状态" prop="status">
          <a-select v-model="form.status" placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option value="0">正常</a-select-option>
            <a-select-option value="1">禁用</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-if="form.status == 1" label="禁用原因" prop="whyName">
          <a-checkbox-group v-model="form.whyName">
            <a-checkbox v-for="item in whyList" :value="item.id" :key="item.id">{{ item.whyName }}</a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item v-if="form.status == 1" label="备注（选填）">
          <a-textarea v-model="form.disableNote" :rows="4" :maxLength="60" placeholder="限60个字符以内" />
        </a-form-model-item>
        <a-form-model-item label="简介">
          {{ form.introduction }}
        </a-form-model-item>
        <a-form-model-item label="其内容是否需要人审" prop="isAudit">
          <a-radio-group v-model="form.isAudit">
            <a-radio :value="0">是</a-radio>
            <a-radio :value="1">否</a-radio>
          </a-radio-group>
          <div>注：无论是否人审均会先进行机审</div>
        </a-form-model-item>
        <a-form-model-item label="内容推广权限" prop="isPromote">
          <a-radio-group v-model="form.isPromote">
            <a-radio :value="1">图片/视频不支持带商品推广</a-radio>
            <a-radio :value="0">图片/视频支持带商品推广</a-radio>
          </a-radio-group>
          <div>注：明星KOL等代言图，若不支持带商品推广，请正确设置推广权限，避免不必要的投诉</div>
        </a-form-model-item>

        <a-form-model-item label="其他渠道是否可用" prop="isUse">
          <a-radio-group v-model="form.isUse">
            <a-radio value="0">是</a-radio>
            <a-radio value="1">否</a-radio>
          </a-radio-group>
          <div>注：设置该用户发布的内容是否支持其他渠道应用</div>
        </a-form-model-item>
        
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" @click="handleSubmit">保存</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </a-spin>
</template>
<script>
import JImageUpload from '../../components/JImageUpload'
import { userAdd, identityList, whyPage, userDisable, userAddDisable } from '@/api/micromall/communityUser'

export default {
  components: {
    JImageUpload
  },
  data() {
    return {
      currentIdentityId: '',
      userDisableList: [],
      spinning: false,
      identityList: [],
      whyList: [],
      form: {
        whyName: [],
        isUse: '1'
      },
      imgList: [],
      rules: {
        isPromote: [{ required: true, message: '请选择', trigger: 'change' }],
        isAudit: [{ required: true, message: '请选择', trigger: 'change' }],
        whyName: [{ required: true, message: '请选择', trigger: 'change' }],
        status: [{ required: true, message: '请选择', trigger: 'change' }],
        identityId: [{ required: true, message: '请选择', trigger: 'change' }],
        channel: [{ required: true, message: '请选择', trigger: 'change' }],
        isUse: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getIdentityList()
    this.getWhyPage()
    this.getDetails()
  },
  computed: {},
  mounted() {},
  methods: {
    // 查询用户被禁用记录
    getUserDisable(id) {
      const data = {
        id,
        current: 1,
        size: 1
      }
      userDisable(data).then(res => {
        if (res.code === 200) {
          const { records } = res.data
          this.form.disableNote = records[0].disableNote ? records[0].disableNote : ''
          this.form.whyName = records[0].whyName ? records[0].whyName.split(',').map(e => Number(e)) : []
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 获取身份标识
    getIdentityList() {
      identityList({}).then(res => {
        if (res.code === 200) {
          this.identityList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 禁用原因
    getWhyPage() {
      const data = {
        type: 4,
        status: 0
      }
      whyPage(data).then(res => {
        if (res.code === 200) {
          this.whyList = res.data.records
        } else {
          this.$message.error(res.msg)
        }
      })
    },


    // 获取详情
    getDetails() {
      const item = JSON.parse(decodeURIComponent(this.$route.query.item))
      const { whyName, status, identityId } = item
      this.form = {
        ...item,
        whyName: whyName ? whyName.split(',') : []
      }
      this.currentIdentityId = identityId
      if (status == 1) {
        this.getUserDisable(item.id)
      }
    },

    getUploadParams() {
      return {
        actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
        headers: {
          authorization: 'authorization-text'
        },
        uploadHost: 'https://img.bzhz.jnbygroup.com/'
      }
    },

    // 图片change
    fileImageChange(list) {
      this.form.headPortrait = list.length ? list[0].url : ''
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    // 禁用
    getUserAddDisable() {
      const { disableNote, whyName, id, status } = this.form
      if (status != 1) return
      const data = {
        userId: id,
        disableNote: disableNote,
        whyName: whyName.join(',')
      }
      userAddDisable(data).then(res => {
        if (res.code === 200) {
          this.$router.go(-1)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 保存
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          const { whyName, disableNote, status } = this.form
          const data = {
            ...this.form,
            whyName: status == 1 ? whyName.join(',') : null,
            disableNote: status == 1 ? disableNote : null
          }
          this.spinning = true
          userAdd(data)
            .then(res => {
              if (res.code === 200) {
                if (status == 1) {
                  this.getUserAddDisable()
                }else{
                  this.$router.go(-1)
                }
              } else {
                this.spinning = false
                this.$message.error(res.data.msg)
              }
            })
            .catch(err => {
              this.spinning = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.avatar {
  width: 100px;
  height: 100px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
}
/deep/.ant-checkbox-wrapper {
  margin-left: 0;
  margin-right: 8px;
}
</style>
